<template>
	<view class="zh-article-dynamic">
		<view class="list">
			<view class="item" @click="navigateTo('/pages/article/dynamic/detail?noticeId=' + item.noticeId)" v-for="item in articleData.list" :key="item.noticeId">
				<view class="top display-flex">
					<view class="font-30 font-302D2D font-bold dynamic-text">
						<text class="dynamic-title">{{item.noticeTitle}}</text>
						<text class="to-top"  v-if="item.isTopping == '1'">置顶</text>
					</view>
				</view>
				<view class="bottom display-flex justify-between align-center">
					<view class="display-flex align-center">
						<image src="@/static/icons/avatar_icon.png" class="avatar-icon"/>
						<text class="ml-10 font-26 font-666">{{ item.source }}</text>
					</view>
					<text class="font-24 font-BAB9B9">{{ item.createTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { article } from '@/api'
	import { util } from '@/utils'
	import type { ArticleData } from '@/@type/article'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	
	const status = ref(0)
	const articleData: ArticleData = reactive({
		query:{},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		list:[],
		total:0
	})
	
	onLoad(() => {
		articleList()
	})
	
	const articleList = () => {
		if(status.value == 2) return
		status.value = 1
		article.getNoticeList(articleData.query, articleData.params).then((res:any) => {
			if(res.rows.length == 0) return status.value = 2
			const data = res.rows
			data.forEach((item: any) => {
				item.createTime = item.createTime?util.getDate(item.createTime):""
			})
			articleData.list = [...articleData.list,...res.rows],
			articleData.total = res.total
		})
	}
	
	onReachBottom(() => {
		articleData.params.pageNum++
		articleList()
	})
	
	onPullDownRefresh(() => {
		status.value = 0
		articleData.params.pageNum = 1
		articleData.list = []
		articleList()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-article-dynamic {
		.list {
			.item {
				background-color: $uni-bg-card-color;
				padding:40rpx 30rpx;
				margin-top: 20rpx;
				display:block;
				.top {
					.dynamic-text {
						overflow: hidden;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;  /*要显示的行数*/
						-webkit-box-orient: vertical;
					}
					.dynamic-title {
						line-height:45rpx;
						vertical-align: middle;
					}
					.to-top {
						display: inline-block;
						width: 57rpx;
						height: 30rpx;
						//#ifdef APP-PLUS
						line-height: 32rpx;
						box-sizing:border-box;
						//#endif
						//#ifdef MP-WEIXIN || H5
						line-height: 30rpx;
						//#endif
						border: 1rpx solid #EC1010;
						border-radius: 6rpx;
						color:#EC1010;
						font-size: 20rpx;
						display: inline-block;
						margin-left:15rpx;
						text-align:center;
					}
				}
				.bottom {
					margin-top: 30rpx;
					.avatar-icon {
						width:24rpx;
						height: 24rpx;
					}
				}
			}
		}
	}
</style>
